<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-breadcrumb separator-class="el-icon-arrow-right" v-if="subjects.id && subjects.name">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{ subjects.id ? subjects.name : '' }}</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
        <br>
     <!-- 头部区域 -->
      <el-row>
        <el-col :span="18"  >
          <!-- 搜索框 -->
          <el-col :span="18">
            <el-form ref="subjectFrom" :model="directoryData" label-width="80px">
              <el-col :span="10">
              <el-form-item label="目录名称">
                <el-input class="inputCol" v-model="directoryData.directoryName"></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="10">
              <el-form-item label="状态">
                <el-select v-model="directoryData.state" placeholder="请选择">
                  <el-option label="已启用" :value="1"> </el-option>
                  <el-option label="已禁用" :value="0"> </el-option>
                </el-select>
              </el-form-item>
              </el-col>
            </el-form>
          </el-col>
          <el-col :span="6">
            <el-button size="small" class="colInput" plain @click="clearall">清除</el-button>
            <el-button size="small" class="colInput" type="primary" @click="getlist">搜索</el-button>
          </el-col>
        </el-col>
        <el-col :span="6">
          <el-button type="text" class="colright" icon="el-icon-back" v-if="subjects.id && subjects.name" @click="$router.back()">返回学科</el-button>
          <el-button class="colright" size="mini" type="success" icon="el-icon-edit" @click="addDialogVisible=true">新增目录</el-button>
        </el-col>
      </el-row>
    <!-- 头部区域结束 -->
        <el-alert
          :title="`数据一共${counts}条`"
          type="info"
          show-icon
          :closable="false"
          class="infoMessage"
        ></el-alert>
        <!-- end -->
        <!-- 数据 -->
            <!-- 表格 -->
            <el-table
              stripe
              style="width: 100%" :data="list">
              <el-table-column
              align="center"
                type="index"
                label="序号"
                width="90">
              </el-table-column>
              <el-table-column
               align="center"
                prop="subjectName"
                label="所有学科">
              </el-table-column>
              <el-table-column
               align="center"
                prop="directoryName"
                label="目录名称">
              </el-table-column>
                 <el-table-column
                  align="center"
                prop="username"
                label="创建者">
              </el-table-column>
              <el-table-column
               align="center"
                prop="addDate"
                label="创建时间">
              </el-table-column>
              <el-table-column
               align="center"
                prop="totals"
                label="面试题数量">
              </el-table-column>
              <el-table-column
                align="center"
                prop="state"
                label="状态">
                <template slot-scope="scope">
                   {{ scope.row.state===1 ? '已禁用' : '已启用' }}
                </template>
              </el-table-column>
              <el-table-column prop="address" fixed="right" label="操作" width="180">
                <template slot-scope="scope">
                  <el-button type="text"  @click="changeState(scope.row)">{{ scope.row.state===1 ? '启用' : '禁用' }}</el-button>
                  <el-button type="text"  :disabled="scope.row.state === 1" @click="editDirectorys(scope.row)">修改</el-button>
                  <el-button type="text"  :disabled="scope.row.state === 1" @click="delDirectory(scope.row)">删除</el-button>
                </template>
              </el-table-column>

            </el-table>
        <!-- end -->
        <!-- 分页 -->
          <div class="block" style="float:right">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="directoryData.page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="directoryData.pagesize"
              background
              layout="prev, pager, next,sizes, jumper"
              :total="counts">
            </el-pagination>
          </div>
        <!-- end -->
        <!-- 新增标签弹层 -->
         <!-- 添加目录弹框 -->
    <el-dialog title="新增目录" :visible.sync="addDialogVisible" width="20%" @close="restDir">
      <!-- 主体区域 -->
      <el-row>
        <el-col>
          <el-form :model="directorysForm" :rules="directorysFormRules" ref="directorysFormRef" label-width="80px" class="demo-ruleForm">
            <el-form-item v-if="!subjects.id && !subjects.name" class="elform" label="所属学科">
              <el-select v-model="directorysForm.value" placeholder="请选择" style="width: 100%;">
                <el-option :label="item.label" :value="item.value" v-for="item in addFrom" :key="item.id"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="elform" label="目录名称" prop="directoryName">
              <el-input v-model="directorysForm.directoryName" placeholder="请输入目录名称" style="width: 100%;"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDirForm">确 定</el-button>
      </span>
    </el-dialog>

 <!-- 修改目录弹框 -->
    <el-dialog title="修改目录" :visible.sync="editDialogVisible" width="20%" @close="restDir">
      <!-- 主体区域 -->
      <el-row>
        <el-col>
          <el-form :model="editDirectoryList" :rules="directorysFormRules" ref="directorysFormRef" label-width="80px" class="demo-ruleForm">
            <el-form-item v-if="!subjects.id && !subjects.name" class="elform" label="所属学科">
              <el-select v-model="editDirectoryList.value" placeholder="请选择" style="width: 100%;">
                <el-option :label="item.label" :value="item.value" v-for="item in addFrom" :key="item.value"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="elform" label="目录名称" prop="directoryName">
              <el-input v-model="editDirectoryList.directoryName" placeholder="请输入目录名称" style="width: 100%;"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editDirForm">确 定</el-button>
      </span>
    </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list as getlist, remove, changeState, add, update } from '../../api/hmmm/directorys'
import { simple } from '@/api/hmmm/subjects'
import dayjs from 'dayjs'
export default {
  name: 'directorys',
  components: {

  },
  data () {
    return {
      list: [],
      directoryData: {
        page: 1,
        pagesize: 10,
        directoryName: '',
        state: null
      },
      counts: 0,
      directoryList: [], // 数据列表
      // 数据id'
      infoId: '',
      // 修改请求数据
      editDirectoryList: {
        directoryName: '',
        value: ''
      },
      // 修改的弹框
      editDialogVisible: false,
      // 添加目录的弹框
      addDialogVisible: false,
      // 简单数据列表
      addFrom: [],
      // 添加目录的数据
      directorysForm: {
        directoryName: '',
        // 下拉框的值
        value: ''
      },
      // 验证
      directorysFormRules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
        ]
      }

    }
  },
  // 获取地址栏数据
  computed: {
    subjects () {
      return this.$route.query || null
    }
    
  },
  created () {
    this.getlist()
    this.getAddFrom()
  },
  methods: {
    // 添加
    async addDirForm () {
      try {
        if (this.subjects.id && this.subjects.name) {
          console.log(111)
          await add({
            subjectID: +this.subjects.id,
            directoryName: this.directorysForm.directoryName
          })
          this.$message.success('新增目录成功')
          this.addDialogVisible = false
          this.getlist()
        } else {
          await add({
            subjectID: this.directorysForm.value,
            directoryName: this.directorysForm.directoryName
          })
          this.$message.success('新增目录成功')
          this.addDialogVisible = false
          this.getlist()
        }
      } catch (e) {
        this.$message.error('新增目录失败')
        console.log(e)
      }
    },
    // 修改
    async editDirForm () {
      try {
        if (this.subjects.id && this.subjects.name) {
          await update({
            id: this.infoId,
            subjectID: +this.subjects.id,
            directoryName: this.editDirectoryList.directoryName
          })
          this.$message.success('修改目录成功')
          this.editDialogVisible = false
          this.getlist()
          // console.log();
        } else {
          await update({
            id: this.infoId,
            subjectID: this.editDirectoryList.value,
            directoryName: this.editDirectoryList.directoryName
          })
          this.$message.success('修改目录成功')
          this.editDialogVisible = false
          this.getlist()
        }
      } catch (e) {
        console.log(e)
      }
    },
    // 点击修改显示弹框
    editDirectorys (row) {
      this.editDirectoryList.value = row.subjectID
      console.log(row.subjectID)
      console.log(row)
      this.infoId = row.id
      this.editDirectoryList.directoryName = row.directoryName
      this.editDialogVisible = true
    },
    // 重置表单
    restDir () {
      this.$refs.directorysFormRef.resetFields()
      this.directorysForm.value = ''
    },
    // 清除头部搜索框
    clearall () {
      this.directoryData.directoryName = ''
      this.directoryData.state = null
      this.getlist()
    },
    // 切换启用禁用状态
    async changeState (row) {
      try {
        // console.log(111)
        await changeState({
          id: row.id,
          state: row.state === 1 ? 0 : 1
        })
        this.$message.success('操作成功')
        row.state = row.state === 1 ? 0 : 1
        console.log(row.state)
        // if (row.state === 0) {

        // }
      } catch (e) {
        this.$message.error('请求错误')
      }
    },

    // 删除
    async delDirectory (row) {
      // console.log(111)
      // row.splice(index, 1)
      const configRuselt = await this.$confirm('此操作讲永久删除该学科,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (configRuselt !== 'confirm') {
        return this.$message('您取消了删除操作！')
      }
      try {
        const { data } = await remove(row)
        console.log(data)
        this.$message.success('删除成功！')
        this.getlist()
      } catch (e) {
        this.$message.error('删除失败！')
      }
    },
    // 获取学科简单列表
    async getAddFrom () {
      try {
        const { data } = await simple()
        this.addFrom = data
        console.log(data)
      } catch (e) {
        console.log(e)
      }
    },
    // 获取目录列表
    async getlist () {
      try {
        this.directoryData.subjectID = this.subjects.id || null
        console.log(this.list.subjectID)
        const { data } = await getlist(this.directoryData)
        data.items.forEach(item => {
          item.addDate = dayjs(item.addDate).format('YYYY-MM-DD hh:mm:ss')
        })
        this.list = data.items
        this.counts = data.counts
        // console.log(data.items)
      } catch (e) {
        this.$message.error('读取失败')
      }
    },

    // 分页
    // 当前以多少条一页
    handleSizeChange (pagesize) {
      this.directoryData.pagesize = pagesize
      this.getlist()
      // console.log(`每页 ${pagesize} 条`)
    },
    // 当前第几页
    handleCurrentChange (page) {
      this.directoryData.page = page
      this.getlist()
      // console.log(`当前页: ${page}`)
    }

  }
}
</script>
<style scoped lang='less'></style>
